<script setup>
import { reactive, toRefs } from 'vue'

/*
解析赋值：
const xx=[1,2]
a=xx[0],b=xx[1]
const [a,b]=[1,2]
const {title}={title:'标题'}
title='标题'

toRefs:作用某数据中的所有属性都转换成ref数据格式
用法：
  import {toRefs} from 'vue'
  const userInfo =reactive({a:1,b:2})
{a,b}=toRefs(userInfo)===>{a:{value:1},b:{value:2}}



*/
const userInfo = reactive({
  username: '张三',
  age: 18
})
console.log(userInfo)
const { username, age } = toRefs(userInfo)
// js:username.value  age.value
</script>

<template>
  <div class="app-page">
    <div>用户名:{{ username }}</div>
    <div>年龄:{{ age }}</div>
    <button @click="age++">修改年龄</button>
    <hr />
    <div>用户名:{{ username }}</div>
    <div>年龄:{{ age }}</div>
  </div>
</template>

<style scoped></style>
